<template>
    <div class="recommend">
        <!--热销推荐标题-->
        <div class="recommend-title">周末去哪</div>
        <!--列表-->
        <div class="recommend-list">
            <ul>
                <li class="list-item" v-for="(item ,index) of list" :key="index">
                    <div class="img-wrap">
                        <img :src="item.imgUrl" alt="">
                    </div>
                    <div class="info">
                        <p class="title">{{item.title}}</p>
                        <p>{{item.pinglun}}</p>
           
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Recommend',
    data(){
      return {
        list: [
          {
            imgUrl:'http://img1.qunarzz.com/sight/source/1606/85/c6b6bad1b977e.jpg_r_640x214_5c638941.jpg',
            title: '漂流勇进，烧烤露营',
            pinglun: '1313条评论'
          },
          {
            imgUrl:'http://img1.qunarzz.com/sight/source/1505/53/02091f1ee43d0a.jpg_r_640x214_2e3256b1.jpg',
            title: '故宫',
            pinglun: '1313条评论'
          },
          {
            imgUrl:'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
            title: '北京欢乐谷',
            pinglun: '1313条评论'
          },
          {
            imgUrl:'http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg',
            title: '颐和园',
            pinglun: '1313条评论'
          },
        ]
      }
    }
  }
</script>

<style scoped lang="stylus">
    .recommend {
        .recommend-title {
            line-height:0.8rem;
            background-color: #eee;
            text-indent:0.4rem;
        }
        .recommend-list {
            box-sizing: border-box;
            /*padding: 0.2rem;*/
            ul {
                .list-item {
                    /*overflow: hidden;*/
                    /*height:1.9rem;*/
                    margin-bottom: 0.5rem;
                    img {
                        width:100%;
                        height: (214 / 565 * 100)%
    
                    }
                    .info {
                        box-sizing: border-box;
                        padding-left: 0.2rem;
                        p {
                            line-height:.6rem;
                        }
                        button {
                            background-color: #ff9300;
                            margin-top:0.2rem;
                            -webkit-border-radius: 0.06rem;
                            -moz-border-radius: 0.06rem;
                            border-radius: 0.06rem;
                            text-align: center;
                            padding: 0.05rem 0.1rem;
                            color: #fff;
                            font-size:12px;
                        }
                    }
                }
            }
        }
    }
</style>